<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击1</button>
    <button id="btn2">点击2</button>

    <fieldset class="container">
        <legend>容器1</legend>
        <input type="file" name="" id="">
        <input type="file" name="" id="">
        <input type="file" name="" id="">
    </fieldset>

    <fieldset>
        <legend>另外的容器</legend>
    </fieldset>
</body>
</html>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script>
    //创建一个元素
    let h1 = $("<h1>一个朴实无华的h1标签</h1>")
    console.log(h1);


    //内部插入元素
    //append 将元素插入到容器中所有子节点的后面
    // $(".container").append(h1)

    //prepend 将元素插入到容器中所有子节点元素的前面
    // $(".container").prepend(h1)

    //------------------------------------------------------

    //外部插入元素
    // before 目标元素.before(插入的元素)
    // $(".container").before(h1)

    //after 目标元素.after(插入的元素)
    // $(".container").after(h1)

    //------------------------------------------------
    
    //替换元素
    //replaceWith
    // $(".container input").replaceWith(h1) 

    //------------------------------------------------

    //删除元素
    //empty 干掉子元素
    // $(".container").empty()

    //remove 把自己也干掉
    // $(".container").remove()

    //克隆元素
    //clone()
    //默认是深度克隆
    let ch1 = h1.clone()
    $(".container").append(h1)
    $(".container").append(ch1)




</script>